/**
 * 1. v-bind:属性名 简写为 :属性名
 *     可以理解为活动属性或是动态属性，
 *     就是让原来的属性值可以放变量或是对象的属性名
 *     <a v-bind:href="link">尚硅谷</a>
 * 2. v-model  实现双向数据绑定 注意：只有表单才可以使用这个指令 
 * 3. v-on:事件名称 简写为@事件名称
 *     用来绑定或是注册事件 
 *     1. 事件处理程序要写在methods中
 *     2. 事件处理程序如果没有形参，我们在调用的时候，可以不用加小括号
 *     3. 事件处理程序如果有一个形参，我们在调用的时候应该要传参，如果不传参(没加小括号)，则这个形参默认是事件对象，如果传参了，则是传递过来的数据
 *     4. 如果有多个形参，并且在事件处理程序当中，还要使用事件对象，这时，事件对象必须是最后一个参数，并且调用的时候要使用$event来传递事件对象 
 * 
 * 4. v-text与v-html 
 *      v-text就相当于是innerText 
 *      v-html就相当于是innerHTML  
 * 5. v-pre与v-once与v-cloak 
 *      不需要表达式，直接写在标签内即可
 *      v-pre是让vue跳过当前的解析
 *      v-once:只编译一次
 *      v-cloak:避免出现闪动
 * 6. 显示与隐藏 v-if v-show
 *      两者可以是boolean类型的值，也可以是具体数据值
 *      v-if如果为false则会销毁当前标签节点 反之则添加或创建
 *      v-show相当于控制的属性是display:none 
 * 
 * 7. 多分支 
 *      v-if与v-else 连着使用
 *      v-if与v-else-if与v-else-if...v-else
 * 
 * 8. v-for 用来迭代数据 循环的数据可以是 string number 数组或是对象  
 *    注意：遍历的项一定要添加一个:key 为了提高效率
 *      :key中的值必须是唯一的，一定一定不要使用数组的索引(索引是变化的)
 * 
 * 9. 使用类来添加样式 
 *      :class="'box demo'"
 *      :class='{box:true}'
 *      :class='['box','demo']'
 * 
 * 10.使用style的方式添加样式
 *      :style="{width:'200px',height:'300px'}"
 *      :style='[box,demo]'
 *      :style='[{box:true},demo]'
 * 
 * 1. 模拟Vue中的劫持与代理
 * 2. 把todoList完善一下
 *      添加  删除  编辑  按回车添加  按ESC不更新
 * 3. v-model中的修饰符
 * 4. 计算属性和侦听器
 */


const vm = new Vue({
  el: '#app',
  data: {
    link:'http://www.atguigu.com'
  }
})